<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        body
        {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background:linear-gradient(to right,rgb(9, 245, 245),rgb(67, 36, 240))
        }

        .title
        {
            color:rgb(158, 75, 75);
        }

        .login_box
        {
            width: 800px;
            height: 400px;
            border: 5px solid rgb(0, 0, 0);
            box-sizing: border-box;
            background: rgb(255, 255, 255);
        }

        .account_box
        {
            position: relative;
            left: 200px;
            top: 90px;
        }

        .account
        {
            font-size: 25px;
            border-radius: 4px;
        }

        .account_box::before 
        {
            content: "账号：";
            font-size: 25px;
        }

        .password_box
        {
            position: relative;
            left: 200px;
            top: 120px;
        }

        .password
        {
            font-size: 25px;
            border-radius: 4px;
        }

        .password_box::before 
        {
            content: "密码：";
            font-size: 25px;
        }

        .error-msg 
        {
            position: relative;
            left: 280px;
            top: 100px;
            color: red;
            font-size: 20px;
            height: 18px;
            margin-top: 4px;
            visibility: hidden;
        }

        .login_button_box
        {
            position: relative;
            left: 180px;
            top: 180px;
        }

        .login_button
        {
            width: 140px;
            height: 60px; 
            font-size: 20px;
            color:white;
            background-color: rgb(56, 139, 235);
            border: 0px;
            border-radius: 10px;
        }

        .register_button_box
        {
            position: relative;
            left: 470px;
            top: 120px;
        }

        .register_button
        {
            width: 140px;
            height: 60px; 
            font-size: 20px;
            color:rgb(255, 255, 255);
            background-color: rgb(0, 0, 0);
            border: 0px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <h1 class="title">对战平台</h1>
    <div class="login_box">
    <form id="loginForm">
        <div class="account_box">
            <input class="account" id="account" type="text" placeholder="请输入账号" >
        </div>
        <div id="accountError" class="error-msg"></div>
        <div class="password_box">
            <input class="password" id="password" type="password" placeholder="请输入密码">
        </div><br>
        <div id="passwordError" class="error-msg"></div>
        <div class="login_button_box">
            <button class="login_button" id="login_button">登录</button>
        </div>
        <div class="register_button_box">
            <button class="register_button" id="register_button">注册</button>
        </div>
    </form>
    </div>

    <script>
        document.getElementById("register_button").addEventListener("click", () => {
        window.location.href = "/register.html";
        });
    
    
        document.getElementById("loginForm").addEventListener("submit", function (e) 
        {
        e.preventDefault(); // 阻止表单默认提交
    
        let Account = document.getElementById("account").value;
        let Password = document.getElementById("password").value;
        let loginbutton=document.getElementById("login_button");
        let isValid = true;
    
        // 验证账号
        if (Account.trim() === "") {
            document.getElementById("accountError").textContent = "请输入账号";
            document.getElementById("accountError").style.visibility = "visible";
            isValid = false;
        } else {
            document.getElementById("accountError").style.visibility = "hidden";
        }
    
        // 验证密码（仅在账号通过验证后检查）
        if (isValid && Password.trim() === "") {
            document.getElementById("passwordError").textContent = "请输入密码";
            document.getElementById("passwordError").style.visibility = "visible";
            isValid = false;
        } else {
            document.getElementById("passwordError").style.visibility = "hidden";
        }
    
        if (!isValid) return;
    
        // AJAX 登录请求
        fetch('/login', {
            method: 'POST',
            credentials: "include",
            headers: {
            'Content-Type': 'application/json'},
            body: JSON.stringify({
                account: Account,
                password: Password
            })
        })
        .then(response => {
            if (response.status === 200) {
        // 登录成功处理
            window.location.href = '/game_hall.html'; 
            hideError("passwordError");
            }
            return response.json();
        })
        .then(data => {
        // 登录失败处理
            showError("passwordError",data.reason);
            document.getElementById("account").value = "";
            document.getElementById("password").value = "";
        })
    
        function showError(elementId, data) {
            const errorElement = document.getElementById(elementId);
            errorElement.textContent = data;
            errorElement.style.visibility = 'visible';
            }

        function hideError(elementId) {
            const errorElement = document.getElementById(elementId);
            errorElement.style.visibility = 'hidden';
            }   
    });
    </script>
    
</body>
</html>